<template>
  <div id="map-chart" ref="mapContainer" :style="{ width: width, height: height }"></div>
</template>

<script>import {getMapChart} from "@/api/machine/VendingMachine";
import * as echarts from 'echarts';
import province from '@/assets/Province.json'; // 引入省级地图数据

export default {
  name: 'MyMapChart',
  props: {
    width: {
      type: String,
      default: '450px'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      mapData: [], // 存储地图数据
      chart: null // 存储 ECharts 实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 获取地图数据
      getMapChart().then(res => {
        this.mapData = res.data;

        // 注册地图
        echarts.registerMap('cn', province);

        // 处理省份名称，去掉最后一个字符
        this.mapData.forEach(item => {
          item.name = item.name.slice(0, -1); // 去掉最后一个字符
        });

        // 打印 mapData 以调试
        console.log(this.mapData);

        this.chart = echarts.init(this.$refs.mapContainer);

        // 计算 min 和 max
        const values = this.mapData.map(item => item.value);
        const min = Math.min(...values);
        const max = Math.max(...values);

        const option = {
          title: {
            text: '省份数量分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
          },
          visualMap: {
            min: min, // 根据实际数据的 min 设置
            max: max, // 根据实际数据的 max 设置
            splitNumber: 5,
            inRange: {
              color: ['#a3e4e3', '#fca40b'] // 从浅到深的颜色
            },
            textStyle: {
              color: '#252525' // visualMap 文本颜色
            }
          },
          series: [
            {
              name: '数据值',
              type: 'map',
              map: 'cn', // 使用注册的地图名
              roam: true,
              label: {
                show: true,
                formatter: '{b}' // 显示省名
              },
              data: this.mapData, // 使用获取到的地图数据
              emphasis: {
                label: {
                  show: true,
                  textStyle: {
                    color: 'black'
                  }
                }
              },
              // 点击省份后触发的事件
              onClick: (params) => {
                // params 包含点击省份的信息，如名称和值
                alert(`点击了 ${params.name} 省份，数量为：${params.value}`);
              }
            }
          ]
        };

        this.chart.setOption(option); // 设置图表选项
      }).catch(error => {
        console.error('获取地图数据失败:', error);
      });
    }
  }
};
</script>